<template>
  <div style="width: 100%;">
    <div
        style="
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            width: 100%;
            height: 100px;
            background-color: #F7F8FA;
            border-radius: 6px;
            position: relative;
            cursor: pointer;
        "
        @click="openSign"
    >
        <img src="@/assets/qianming.png" style="height: 20.5px;width: 25px;" alt="">
        <span style="color:#69718C;font-size: 14px;margin-top: 10px;">点此签名</span>
        <img :src="signature" v-if="signature"
            style="
                width: 100%;
                height: 100px;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 2;
                background: #fff;
                border: 1px solid #eee;
                border-radius: 6px;
            "
        alt="">
    </div>
    <el-dialog title="签名" :visible.sync="dialogShow" width="30%">
        <div style="width: 100%; display: flex; justify-content: center">
            <autograph ref="autograph"> </autograph>
        </div>
        
        <span slot="footer" class="dialog-footer">
            <el-button
            @click="
                removeSign
            "
            >清 空</el-button
            >
            <el-button @click="dialogShow = false">取 消</el-button>
            <el-button type="primary" @click="submit" :loading="loading">确 定</el-button>
      </span>
    </el-dialog>
    <jkcns 
        :formLabelAlign="Object.assign({subjectTittle},formLabelAlign)"
        :autographPath="autographPath"
        v-if="dialogShow"
    ></jkcns>
    <xlcn 
        :formLabelAlign="formLabelAlign"
        :autographPath="autographPath"
        v-if="dialogShow"
    ></xlcn>
    <zjbl 
        :formLabelAlign="formLabelAlign"
        :autographPath="autographPath"
        v-if="dialogShow"
    ></zjbl>
    <fwxy
        :autographPath="autographPath"
        v-if="dialogShow"
    ></fwxy>
  </div>
</template>

<script>
import autograph from "@/components/autograph";//签名组件
import jkcns from './dom/jkcns.vue';//健康承诺书
import fwxy from './dom/fwxy.vue';//服务协议
import xlcn from './dom/xlcn.vue';//学历承诺书
import zjbl from './dom/zjbl.vue';//证件办理费用协议
import {
  upFile,
  upFileqm,
} from "@/utils/upFiel.js";
export default {
    components: {
        autograph,
        jkcns,
        fwxy,
        xlcn,
        zjbl,
    },
    props:{
        field_id:{
            type:String,
            default:'',
        },
        field_type:{
            type:String,
            default:'',
        },
        value:{
            type:String,
            default:'',
        },
        formLabelAlign:{
            type:Object,
            default:()=>{
                return {}
            }
        },
        subjectTittle:{
            type:String,
            default:'',
        }
    },
    model:{
        props:'value',
        event:'change'
    },
    watch:{
        dialogShow(val){
            this.$emit('change',val?this.field_id:'')
        },
        value(val){
            this.dialogShow=(val==this.field_id)
        },
    },
    data () {
        return {
            dialogShow:this.value==this.field_id,
            canvasdata:null,
            autographPath:'',//base64
            signsrc:'',
            signature:'',
            loading:false,
        }
    },
    methods:{
        async submit(){
                if (this.canvasdata === this.$refs.autograph.commit()) {
                    this.$hint.error("请签名后提交");
                    this.dialogShow=false
                }
                this.autographPath = this.$refs.autograph.commit();
                this.loading=true
                await upFileqm(this.autographPath, this.formLabelAlign.nickname, {
                    field: "signature",
                }).then((res) => {
                    if (res.code == 200) {
                        this.signature = res.data.url;
                        this.signsrc = res.data.url
                        this.$forceUpdate()
                        if(this.field_type == "sign"){
                            this.loading=false
                            this.$emit('update',{signsrc:this.signsrc,signature:this.signature})
                            this.dialogShow=false
                        }
                    } else {
                        this.$hint.error(res.msg || "签名储存失败，请联系管理员");
                    }
                });
                if (this.field_type != "sign") {
                    setTimeout(() => {
                        upFile(
                            this.field_id,
                            { field: this.field_id },
                            'DomImg'+this.field_id
                        )
                        .then((res) => {
                            this.loading=false
                            if (res.code == 200) {
                                this.$hint.success("提交签名成功");
                                this.signsrc = res.data.url
                                this.$emit('update',{signsrc:this.signsrc,signature:this.signature})
                                this.dialogShow=false
                            } else {
                                this.$hint.error(res.msg || "签名失败");
                            }
                        })
                        .catch((err) => {
                            this.loading=false
                            this.$hint.error("存储状态异常,请重试!");
                            this.dialogShow=false
                        });
                    }, 500);
                }
        },
        openSign(){
            this.$emit('openSign',this.field_id)
            // this.$nextTick(()=>{
            //     this.canvasdata = this.$refs.autograph.commit()
            // });
        },
        removeSign(){
            this.signsrc=''
            this.signature=''
            this.autographPath=''
            this.$refs.autograph.clear();
            this.$emit('update',{signsrc:this.signsrc,signature:this.signature})
        }
    }
}
</script>

<style>

</style>